<template>
    <div style="margin-bottom: 5px">
        <el-card>
            <div style="color: #333333">监办公作台</div>
            <div style="
          cursor: pointer;
          display: flex;
          width: 500px;
          justify-content: space-between;
          margin-top: 12px;
        ">
                <div class="tip">
                    <div>
                        <p style="
                width: 100%;
                height: 20px;
                text-align: center;
                margin-bottom: 10px;
                color: #4a7eff;
              ">
                            {{ data.taskTotal }}
                        </p>
                        <p style="
                width: 100%;
                height: 20px;
                text-align: center;
                color: #999999;
              ">
                            合计
                        </p>
                    </div>
                </div>
                <div class="tip">
                    <div>
                        <p style="
                width: 100%;
                height: 20px;
                text-align: center;
                margin-bottom: 10px;
                color: #4a7eff;
              ">
                            {{ data.taskTotal - data.taskExceed }}
                        </p>
                        <p style="
                width: 100%;
                height: 20px;
                text-align: center;
                color: #999999;
              ">
                            正常推进
                        </p>
                    </div>
                </div>
                <div class="tip">
                    <div>
                        <p style="
                width: 100%;
                height: 20px;
                text-align: center;
                margin-bottom: 10px;
                color: #4a7eff;
              ">
                            {{ data.taskExceed }}
                        </p>
                        <p style="
                width: 100%;
                height: 20px;
                text-align: center;
                color: #999999;
              ">
                            已超期
                        </p>
                    </div>
                </div>
                <div class="tip">
                    <div>
                        <p style="
                width: 100%;
                height: 20px;
                text-align: center;
                margin-bottom: 10px;
                color: #4a7eff;
              ">
                            {{ data.taskTotal - data.taskExceed }}
                        </p>
                        <p style="
                width: 100%;
                height: 20px;
                text-align: center;
                color: #999999;
              ">
                            正常办公
                        </p>
                    </div>
                </div>
                <div class="tip">
                    <div>
                        <p style="
                width: 100%;
                height: 20px;
                text-align: center;
                margin-bottom: 10px;
                color: #4a7eff;
              ">
                            {{ data.taskExceed }}
                        </p>
                        <p style="
                width: 100%;
                height: 20px;
                text-align: center;
                color: #999999;
              ">
                            已终止
                        </p>
                    </div>
                </div>
            </div>
        </el-card>
    </div>

    <el-row>
        <el-col :span="16">
            <div>
                <el-card>
                    <div style="color: #333333; margin-bottom: 10px">常见任务分类</div>
                    <div>
                        <el-button type="primary" @click="load">全部({{ data.taskTotal }})</el-button>
                        <el-button type="warning" @click="upcoming">即将超期({{ data.taskUpcoming }})</el-button>
                        <el-button type="info" @click="exceed">已超期({{ data.taskExceed }})</el-button>
                    </div>

                    <div v-for="task in data.taskAll" :key="task.id" style="margin-top: 20px; width: 950px">
                        <div style="border: 1px solid #eeeeee; margin-bottom: 10px"></div>
                        <el-descriptions title="任务名称">
                            <el-descriptions-item v-if="new Date(task.stopTime) < new Date()">
                                <el-tag type="danger" size="large">已 超 期</el-tag>
                            </el-descriptions-item>
                            <el-descriptions-item label="发布类型">{{ task.formType }}123</el-descriptions-item>
                            <!-- <el-descriptions-item label="手机号">{{ task.phone }}</el-descriptions-item> -->
                            <el-descriptions-item label="任务类型">{{
                                task.type
                                }}</el-descriptions-item>
                            <el-descriptions-item label="难易程度">
                                <el-tag type="warning" size="small">{{ task.level }}</el-tag>
                            </el-descriptions-item>
                            <el-descriptions-item label="时间范围">
                                {{ task.startTime }} ~ {{ task.stopTime }}
                            </el-descriptions-item>
                        </el-descriptions>
                        <div style="border: 1px solid #eeeeee"></div>
                    </div>
                </el-card>
            </div>
        </el-col>
        <el-col :span="8">
            <!-- 插图 -->
            <div>
                <img style="width: 100%;height: 100%;" src="/src/assets/supervise.png" alt="">
            </div>
            <!-- 展示图等模块 -->
            <div style="margin-left: 5px; margin-top: 60px; border-radius: 8px; background-color: #ffffff">
                <div id="wjc" style="
            width: 500px;
            height: 400px;
            box-sizing: border-box;
            margin-left: 25px;
          "></div>
            </div>
            
            <div style="
          margin-left: 5px;
          border-radius: 8px;
          background-color: #ffffff;
          margin-top: 10px;
        ">
                <div id="wjc2" style="width: 500; height: 400px"></div>
            </div>
        </el-col>
    </el-row>
</template>

<script setup>
import {
    selectAllTask,
    selectCalssifyNumber,
    selectExceedTask,
    selectTaskEcharts,
    selectUpcomingTask,
    taskAll,
} from "@/api/task";
import { reactive, ref } from "vue";
import * as echarts from "echarts";

const data = reactive({
    taskTotal: undefined,
    taskExceed: undefined,
    taskUpcoming: undefined,
    taskAll: [], //放置所有的任务
});

//wjc --- 按照说明定制的图片
const option = {
    title: {
        text: "任 务 分 类 统 计",
        left: "center",
        top: "4%", // 调整图名图片的位置
    },
    tooltip: {
        trigger: "item",
    },
    legend: {
        orient: "horizontal", // 图例水平排列
        bottom: "10%", // 图例放置在底部
        left: "center", // 图例居中
    },
    series: [
        {
            name: "数量", // 修改提示名称
            type: "pie",
            radius: "50%",
            data: [
                { value: 0, name: "工作" },
                { value: 0, name: "学习" },
                { value: 0, name: "卫生" },
                { value: 0, name: "通知" },
                { value: 0, name: "其它" },
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                },
            },
            label: {
                normal: {
                    show: true,
                    position: "outside", // 将标签显示在扇区外部
                    formatter: "{d}%",
                    fontSize: 15,
                    fontWeight: "bold",
                },
            },
            labelLine: {
                normal: {
                    show: true,
                    length: 10, // 标签线的长度
                    length2: 20, // 第二段标签线的长度
                },
            },
        },
    ],
};

// 定义颜色数组，用于柱状图的颜色
const myColor = ["#5470C6", "#91CC75", "#FAC858", "#EE6666", "#73C0DE"]
const myEcherts = {
    title: {
        text: "单 位 任 务 数 量",
        left: "center",
        top: "4%", // 调整图名图片的位置
    },
    grid: {
        top: "10%",
        left: "19%",
        bottom: "10%",
    },
    xAxis: {
        show: false,
    },
    yAxis: [
        {
            type: "category",
            inverse: true,
            data: ["其它", "工作", "学习", "卫生", "通知"],
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                color: "#303133",
            },
        },
        {
            data: [],
            inverse: true,
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                color: "#fff",
            },
        },
    ],
    series: [
        {
            name: "条",
            type: "bar",
            data: [70, 34, 60, 78, 69],
            yAxisIndex: 0,
            itemStyle: {
                barBorderRadius: 20,
                color: function (params) {
                    return myColor[params.dataIndex];
                },
            },
            barCategoryGap: 50,
            barWidth: 10,
            label: {
                show: true,
                position: "inside",
                // formatter: "{c}%"
            },
        },
        {
            name: "框",
            type: "bar",
            barCategoryGap: 50,
            barWidth: 15,
            yAxisIndex: 1,
            data: [20, 20, 20, 20, 20], // 每个部门最高20任务进行中
            itemStyle: {
                color: "none",
                borderColor: "#00c1de",
                borderWidth: 3,
                barBorderRadius: 15,
            },
        },
    ],
}

//点击切换超期的函数任务
const exceed = async () => {
    await selectExceedTask().then((res) => {
        data.taskAll = res.data.data
    })
}
//点击切换即将预期的任务
const upcoming = async () => {
    await selectUpcomingTask().then((res) => {
        data.taskAll = res.data.data
    })
}

const load = async () => {
    await selectCalssifyNumber().then((res) => {
        data.taskTotal = res.data.data[0].allTotal
        data.taskUpcoming = res.data.data[0].upcomingTotal
        data.taskExceed = res.data.data[0].exceedTotal
    })

    await selectAllTask().then((res) => {
        data.taskAll = res.data.data
    })

    await selectTaskEcharts().then((res) => {
        let transformedData = res.data.data.map((item) => {
            return {
                value: item.allTotal,
                name: item.type,
            }
        })
        option.series[0].data = transformedData
        myEcherts.series[0].data = transformedData
    })

    // echarts图的更新
    const myChart = echarts.init(document.getElementById("wjc"))
    myChart.setOption(option)
    //高定制 wjc
    const chart = echarts.init(document.getElementById("wjc2"))
    chart.setOption(myEcherts)
}

load()
</script>


<style scoped>
.tip {
    border: 1px solid #eeeeee;
    width: 150px;
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
</style>